<template>
    <div class="register">
        <div class="header"></div>
        <!-- 主体内容容器 -->
        <div class="container">
            <div class="login-box">
                <img src="../assets/logo.png" class="img-logo">
            </div>
            <!-- 主体 -->
              <div class="form-box">
                <!-- 左半体 -->
                <div class="left">
                  <!-- 二维码扩大效果 -->
                  <div  v-if="isfull" class="full_img2d">
                    <img src="../assets/6.png" class="big-img" @click="close()">
                    <span>请用微信扫描登录..</span>
                  </div>
                  <!-- 正常效果 -->
                  <div><img src="../assets/6.png" class="img-2d" @click="open()"></div>
                  <div class="inpu-form">
                      <div class="text">
                          <span style="font-size: 20px;margin-right: 8px;">找工作</span>
                          <span style="font-size: 14px; border-left: 1px solid rgba(166, 166, 166, 1); padding-left: 8px;">专注互联网职业机会</span>
                      </div>
                      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                          <el-form-item label-width="0" prop="pass">
                              <el-input type="text" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入电话号码"></el-input>
                          </el-form-item>
                          <el-form-item label-width="0" prop="checkPass">
                              <el-input type="text" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请输入验证码" ></el-input>
                          </el-form-item>
                            <el-form-item label-width="0">
                              <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                          </el-form-item>
                      </el-form>
                      <div>
                          <span  class="user-text">注册代表你已同意<router-link style="text-decoration: none; color: rgba(76, 176, 141, 1);" to="">「拉勾用户协议」</router-link></span>
                      </div>
                  </div>
                </div>
                <div class="dashed-line"></div>
                <!-- 右半体 -->
                <div class="right">
                  <div class="right-header">
                    <router-link to=""><span style="color: rgba(0, 179, 138, 1);">我要招人></span></router-link>
                  </div>
                  <div class="right-center">
                    <span>已有账号</span>
                    <br>
                    <router-link to="/login"><strong style="color: rgba(0, 179, 138, 1);">立即登录-></strong></router-link>
                  </div>
                  <!-- 第三方登录 -->
                  <div>
                    <span style="font-size: 14px;">使用以下账号直接登录</span>
                    <br>
                    <img src="../assets/sina.png">
                    <img src="../assets/wechat.png">
                    <img src="../assets/QQ.png">
                    <img src="../assets/baidu.png">
                  </div>
                </div>
             </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Register',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        } 
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          
        },
        isfull:false,
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm() {
        if ( this.ruleForm ) {
          this.$router.push('/infomation')
        }
      },
      close() {
        this.isfull = !this.isfull
      },
      open() {
        this.isfull = !this.isfull
      }
    }
}
</script>

<style scoped>

    .register {
        
        height: 100vh;
    }

    .header {
        height: 40%;
        width: 100%;
        background-color: rgba(0, 179, 138, 1);
    }

    .container {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 20%;
        width: 45%;
        left: 50%;
        transform: translateX(-50%);
    }

    .login-box {
        padding: 4px;
    }

    .img-logo {
        height: 45px;
    }

    .form-box {
        display: flex;
        padding: 10px;
        background-color: white;
        border: rgba(220, 225, 230, 1) solid 1px;
        height: 500px;

    }

    .left {
        position: relative;
        width: 60%;
        background-color: white;
    }

    .full_img2d {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: 100%;
      background-color: white;
      text-align: center;
      z-index: 1000;
    }
    
    .big-img {
      height: 200px;
    }

    .img-2d {
        height: 80px;
        padding: 0px;
    }

    .inpu-form {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 90px;
        padding-bottom: 90px;
        padding-left: 60px;
        padding-right: 60px;
        background-color: white;
        clip-path: polygon(80px 0 ,100% 0 , 100% 100% , 0 100% ,0 80px);
    }

    .text {
        margin-bottom: 50px;
        letter-spacing: 1.5px;
    }

    button {
        width: 100%;
        border: rgba(0, 179, 138, 1) solid 1px;
        background-color: white;
        color: rgba(0, 179, 138, 1);
    }

    button:hover {
        background-color: rgba(0, 179, 138, 1);
    }

    .user-text {
        font-size: 13px;
        color: rgba(166, 166, 166, 1);
    }

    .dashed-line {
        position: absolute;
        border-left: 1.5px dashed rgba(229, 229, 229, 1);
        top: 30%;
        height: 250px;
        left: 55%;
    }

    .right {
      flex: 1;
    }

    .right-header {
      text-align: right;
      padding-right: 20px;
      margin-top: 37%;
      margin-right: 30px;
      color: rgba(0, 179, 138, 1);
    }

    .right-center {
      margin-top: 40px;
      color: rgba(80, 80, 80, 1);
      font-size: 14px;
      margin-left: 30px;
      margin-bottom: 40px;
    }

    img {
      padding: 6px;
      height: 30px;
      margin-right: 10px;
      filter: saturate(0);
      cursor: pointer;
    }

    img:hover {
      filter: none;
    }

    span {
      color: rgba(80, 80, 80, 1);
    }

    a {
      text-decoration: none;
    }

</style>